<template>
<div class="main_box" v-loading="loading">
  <div class="top">
    <div class="competition" v-for="(item,index) of games" :key="index">
      <div class="img"> <!-- https://img.tuguaishou.com/ips_templ_preview/73/8c/1a/lg_1816337_1576726401_5dfaef81a188e.jpg!w1024_w?auth_key=2222630483-0-0-83ebfad84453420585f1bb91cf46d238-->
<!--       'fill', 'contain', 'cover', 'none', 'scale-down'-->
        <el-image class="gameImage" fill="fill" :src="item.gameImages">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
      <el-card shadow="always" class="buoy">
        <div class="buoy_text01">{{ item.gameName }}</div>
        <div class="buoy_text02">
          <div>{{ '参赛对象：'+item.gameforpeople }}</div>
          <div>{{ '比赛时间：'+ item.beginTime + '--' + item.endTime}}</div>
        </div>
      </el-card>
      <el-button round :type="item.condition" :disabled="item.show" class="condition" @click="SignUp(item)">{{ item.text }}</el-button>
    </div>
  </div>

  <el-pagination
      class="button"
      background
      :current-page.sync="curPage"
      layout="prev, pager, next"
      :total="numberPages"
      @current-change="hCurrentChange">
  </el-pagination>
</div>
</template>

<script>

export default {
  name: "competitionList",
  data() {
    return {
      games: [],
      numberPages: 1, //总页数
      curPage: 1,  //当前页数
      loading: true,
      show: {
        condition: 'primary',
        text: '点击报名'
      }
    }
  },
  methods: {
    async hCurrentChange(curPage){
      this.loading = true;
      this.games.splice(0,this.games.length);
      this.curPage = curPage
      const res = await this.$api.competitionList(curPage)
      this.numberPages = res.data.page.pages*10;
      res.data.page.records.forEach( temp =>{
        let date = new Date();
        let begin = new Date(temp.signupTime);
        let end = new Date(temp.signendTime);

        if(date >= begin && date <= end){
          temp.condition = 'primary';
          temp.text = '点击报名';
          temp.show = false;
        } else if(date < begin) {
          temp.condition = 'warning';
          temp.text = '报名未开始';
          temp.show = true;
        } else {
          temp.condition = 'info';
          temp.text = '报名以结束';
          temp.show = true;
        }
        this.games.push(temp);
      })
      this.loading = false;
    },
    SignUp(item){
      let gameID = JSON.stringify(item.gameID)
      window.sessionStorage.setItem("gameID",gameID)
      this.$router.push('/information/gamesDetails')
    }
  },
  mounted() {
    this.hCurrentChange(this.curPage)
  }
}
</script>

<style lang="less" scoped>
.main_box{
  background-color: #ffffff;
  padding: 60px 0;
  margin: 0 40px;
  .top{
    display: flex;
    //justify-content: center;
    flex-wrap: wrap;
    .competition{
      height: 492px;
      width: 32%;
      min-width: 400px;
      position: relative;
      .img{
        width: 400px;
        height: 265px;
        border-left: 1px solid #909399;
        border-bottom: 1px solid #909399;
        overflow: hidden;
        box-shadow : 0 8px 23px rgba(0, 0, 0, 0.45), 0 15px 35px rgba(0, 0, 0, 0.04) ;
        position: absolute;
        left: 79.5px;
        top: 23px;
        .gameImage {
          //height: ;
        }
      }
    }
    .buoy{
      width: 280px;
      height: 100px;
      background-color: #ffffff;
      z-index: 10;
      position: absolute;
      top: 270px;
      left: 136.5px;
      ::v-deep .el-card__body{
        padding: 10px 10px;
      }
      .buoy_text01{
        font-weight: bolder;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .buoy_text02{
        position: absolute;
        top: 50px;
      }
    }
    .condition{
      position: absolute;
      left: 220px;
      top: 404px;
    }
  }
  .button{
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }

}
</style>
